require('./Detailwrap.styl');
import React from 'react';
import { Boxs, Context, Avatar, Group, TextField } from 'saltui'
import NoteRound from 'salt-icon/lib/NoteRound';
import { Control } from 'react-keeper'
const { HBox, Box, VBox } = Boxs;
const avatarColors = ['#00A0E9'];
const Bac = require('images/svg/bac.svg')
const Tel = require('images/svg/tel.svg')
const Msg = require('images/svg/msg.svg')
const classNames = require("classnames");
import { monStorage, Storage } from 'clientConfig/util/StoreData';
const renderItem = (letter, isRead) => {
    let arr = [];
    let max = 'E'
    let num = max.charCodeAt() + 1;
    let Component = <NoteRound width="14" fill={isRead == 0 ? "red" : rgb(183, 183, 183)} />;
    do {
        arr.push(Component);
        num--;
    } while (String.fromCharCode(num) != letter);
    return arr
}
const handleClick = (item) => {
    let { warnId, studentId, teacherId, schoolId, warnTypeId, warnGrade, warnLevel, warnDate } = item;
    Control.go('/home/personalwarnlinfo', { data: { warnId, studentId, teacherId, schoolId, warnTypeId, warnGrade, warnLevel, warnDate } })
}
const handleClickTel = (tel) => {
    if (tel) {
        dd.biz.telephone.showCallMenu({
            phoneNumber: tel, // 期望拨打的电话号码
            code: '+86', // 国家代号，中国是+86
            showDingCall: true, // 是否显示钉钉电话
            onSuccess: () => { },
            onFail: () => { }
        });
    }
}
const Detailwrap = {
    Head: (props) => {
        return (
            <div className="detailwrap head">
                <Bac className="" />
                <VBox hAlign="center" vAlign="center" className="content-box">
                    <Box>
                        <Avatar
                            name={props.studentName}
                            size={41}
                            colors={avatarColors}
                            src={props.studentHeadUrl && ("https://www.zxjydev.com" + props.studentHeadUrl)}
                        />
                    </Box>
                    <Box className="t-MT7 head-name">
                        {props.studentName || 'xxx'}
                    </Box>
                </VBox>
            </div>
        )
    },
    Item: (props) => {
        const content = [{ title: "学号", text: props.studentCode }, { title: "性别", text: props.studnetSex }, { title: "班级", text: props.className }];
        const extra_content = [{ title: "地址", text: props.studentAddr }, { title: "学生宿舍号", text: props.dormitory }, { title: "课程", text: props.itemsName }];
        const parentListInfo = props.parentList[0];
        return (
            <div className="detailwrap item">
                <Group.List>
                    <HBox vAlign="center" className="item-info t-FAC t-ML15 t-MR15">
                        {content && content.map((item, index) => {
                            if (!item.text) return null;
                            return (<Box flex={1} className="item-info-content">
                                <p className="t-MB7">{item.title}</p>
                                <p>{item.text}</p>
                            </Box>)
                        })}
                    </HBox>
                </Group.List>
                <Group className="item-basic">
                    <Group.Head className="t-MT45 t-PL10 t-PB7">{parentListInfo && '基本信息'}</Group.Head>
                    <Group.List>
                        <VBox className="t-PL15" >
                            {extra_content && extra_content.map((item, index) => {
                                if (!item.text) return null;
                                return (
                                    <HBox vAlign="center" className="t-MT12 item-info-content">
                                        <Box flex={1}>{item.title}</Box>
                                        <Box flex={1} className="t-FAR t-MR15 t-PB15">{item.text}</Box>
                                    </HBox>
                                )
                            })}
                        </VBox>
                    </Group.List>
                    <Group.List className="t-LH44">
                        <HBox vAlign="center" className="t-PL15 ">
                            <Box flex={2}>{parentListInfo && parentListInfo.parentName}{parentListInfo && '('}{parentListInfo && parentListInfo.relation}{parentListInfo && ')'}</Box>
                            <Box flex={3}>
                                <HBox vAlign="center"  >
                                    <Box flex={2}>{parentListInfo && parentListInfo.phone}</Box>
                                    <Box flex={1}>{parentListInfo && <Msg width="20" fill="rgb(87,137,197)" />}</Box>
                                    <Box flex={1} className="t-MR20 t-FAR" onClick={() => { handleClickTel(parentListInfo.phone) }}> {parentListInfo && <Tel width="20" fill="rgb(87,137,197)" />}</Box>
                                </HBox>
                            </Box>
                        </HBox>
                    </Group.List>
                </Group>
            </div>
        )
    },
    ItemList: (props) => {
        return (
            <div className="detailwrap item-list">
                <Group className="item-basic">
                    <Group.Head className="t-PT15 t-PB7 t-PL10">学情预警</Group.Head>
                    {props.warnList && props.warnList.map((item, index) => {
                        return (
                            <Group.List key={`basic-${index}`} className="item-list-box">
                                <VBox onClick={() => { handleClick(item) }}>
                                    <Box>
                                        <HBox vAlign="center">
                                            <Box className="t-MR10">{item.studentName}</Box>
                                            <Box flex={3}>
                                                {
                                                    renderItem(item.warnGrade, item.isRead)
                                                }
                                            </Box>
                                            <Box flex={1} className="item-list-box-content">{item.warnDate}</Box>
                                        </HBox>
                                    </Box>
                                    <Box>
                                        <HBox className="item-list-box-content">
                                            <Box className="t-MR13">{item.warnTypeName}</Box>
                                            <Box>{item.warnContent}</Box>
                                        </HBox>
                                    </Box>
                                </VBox>
                            </Group.List>)
                    })}
                </Group>
            </div>
        )
    }

}
module.exports = Detailwrap;
